<template>
    <el-container>
      <el-header height="80px" class="header">
        <div class="logo">STYZ_CMS</div>
      </el-header>
      <el-container>
          <el-aside :width="collapseWidth" class="menu">
            <page-menu
              @handle-expand-emit="handleCloseEmit"
              @handle-collapse-emit="handleOpenEmit"
            ></page-menu>
          </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { themePinia } from "@/libs/pinia/theme";
import { computed, ref } from "vue";

const theme=themePinia()

const collapseWidth = ref("225px");

const handleCloseEmit = () => {
  collapseWidth.value = "225px";
};

const handleOpenEmit = () => {
  collapseWidth.value = "64px";
};

// style
const MenuBorderRightColor=computed(()=>theme.HeaderBorderBottomColor)
const HeaderBackgroundColor=computed(()=>theme.HeaderBackgroundColor)
const MainBackgroundColor=computed(()=>theme.MainBackGroundColor)
const MenuBackgroundColor=computed(()=>theme.MenuBackgroundColor)
const LogoColor=computed(()=>theme.LogoColor)

</script>

<style scoped lang="scss">
.main {
  background-color: v-bind(MainBackgroundColor);
}
.menu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: v-bind(MenuBackgroundColor);
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: v-bind(HeaderBackgroundColor);
  border-bottom: 3px solid v-bind(MenuBorderRightColor);

  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: v-bind(LogoColor);
  }
}

</style>
